<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>群发</title>
    <link type="text/css" rel="stylesheet" href="js/emoji/jquery.emojiarea.css">
    <link type="text/css" rel="stylesheet" href="css/style.css">
    <link type="text/css" rel="stylesheet" href="css/frame.css">
    <style>
        .selectAll {
            color: #ffffff;
            background-color: #cccccc;
            width: 1.8rem;
            height: 1.8rem;
            line-height: 1.8rem;
            text-align: center;
            border-radius: .2rem;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0 1rem;
        }

        .selectAll.mm {
            background-color: #F7B824;
        }

        .selectAll.yes {
            background-color: #5FB878;
        }

        .group:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body class="ub ub-ver">
<div id="frameContent" class="ub-f conScrollY">
    <div style="padding: 0 0 1.5rem 0">选择联系人</div>

    <div class="group">
        <div class="ub ub-ac">
            <div class="">分组一</div>
            <div class="isShow">☝</div>
            <div class="ub-f ub ub-pe">
                <div class="selectAll">✔</div>
            </div>
        </div>
        <div class="members">
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">王翠</div>
            <div class="member">李毛</div>
            <div class="member">赵六</div>
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">欧阳狗蛋</div>
        </div>
    </div>
    <div class="group">
        <div class="ub ub-ac">
            <div class="">分组二</div>
            <div class="isShow">☝</div>
            <div class="ub-f ub ub-pe">
                <div class="selectAll">✔</div>
            </div>
        </div>
        <div class="members">
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">王翠</div>
            <div class="member">李毛</div>
            <div class="member">赵六</div>
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">欧阳狗蛋</div>
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">王翠</div>
            <div class="member">李毛</div>
            <div class="member">赵六</div>
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">欧阳狗蛋</div>
        </div>
    </div>
    <div class="group">
        <div class="ub ub-ac">
            <div class="">未分组</div>
            <div class="isShow">☝</div>
            <div class="ub-f ub ub-pe">
                <div class="selectAll">✔</div>
            </div>
        </div>
        <div class="members">
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">王翠</div>
            <div class="member">李毛</div>
            <div class="member">赵六</div>
            <div class="member">张三</div>
            <div class="member">李四</div>
            <div class="member">王锤</div>
            <div class="member">欧阳狗蛋</div>
        </div>
    </div>

</div>

<div id="chatFooter">
    <div id="sendInputUi">
        <form class="ub ub-ac chatFooter">
            <div class="editor">编辑</div>
            <div class="ub-f inputArea">
                <textarea id="chatVal" class="emojis-wysiwyg"></textarea>
            </div>
            <div class="chatIcon emoSend"></div>
            <div id="textOrRich" class="chatIcon richSend"></div>
            <input id="previewImg" type="file" onchange="uploadImg(this);" style="display: none;">
        </form>
    </div>
</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript" src="js/emoji/jquery.emojiarea.js"></script>
<script type="text/javascript" src="js/emoji/faces5/emojis.js"></script>
<script>
    var $chatVal = $('#chatVal'), $inputDiv, $tOr = $('#textOrRich');
    $(document).ready(function () {
        $('.emojis-wysiwyg').emojiarea({wysiwyg: true});//初始化输入框，绑定表情
        $inputDiv = $('.emoji-wysiwyg-editor');
        $inputDiv.on('keydown', function (event) {
            //绑定按键
            var e = event || window.event || arguments.callee.caller.arguments[0],
                    keyCode = e.keyCode;
            if (keyCode == '13' && e.ctrlKey) {
                //ctrl+Enter发送
                e.preventDefault();
                sendMsg();
            }
        });
        $chatVal.on('change', function (event) {
            //当输入框内容改变，切换发送按钮
            var textValue = $chatVal.val();
            if (textValue) {
                if ($tOr.hasClass('richSend')) {
                    $tOr.removeClass('richSend').addClass('textSend');
                }
            } else {
                if ($tOr.hasClass('textSend')) {
                    $tOr.removeClass('textSend').addClass('richSend');
                }
            }
        });

        $(document).on('click', '.textSend', function () {
            //点击发送按钮
            sendMsg();
        });

        $(document).on('click', '.richSend', function () {
            //点击图片按钮
            $('#previewImg').click();
        });

    });

    function sendMsg() {
        alert('群发文本消息');
        clearInput();
    }

    function clearInput() {
        //清空输入区域，同时改变发送按钮
        $chatVal.val('');//清空输入框
        $inputDiv.html('');//清空输入框
        if ($tOr.hasClass('textSend')) {
            $tOr.removeClass('textSend').addClass('richSend');
        }
    }

    function uploadImg(e) {
        //图片上传
        if (e.files && e.files[0]) {
            var fileObj = e.files[0]; // 获取文件对象

            var localPath = e.value;
            var fileType = (e.value.substring(localPath.lastIndexOf("."), e.value.length)).toLowerCase();
            if ((fileType != '.jpg') && (fileType != '.gif') && (fileType != '.jpeg') && (fileType != '.png') && (fileType != '.bmp')) {
                //提示
                layer.msg('图片格式错误，请重新选择');
                return;
            }

            //上传
            var formDataObj = new FormData(); // FormData对象
            formDataObj.append("file", fileObj); // 把文件对象加入FormData 对象
            //... todo ajax提交formDataObj

            alert('群发图片')

        }
    }

    $(document).on('click', '.selectAll', function (e) {
        // 全选/取消全选
        var $e = $(this);
        var $members = $e.parents('.group').find('.member');
        $e.removeClass('mm');
        if ($e.hasClass('yes')) {
            $e.removeClass('yes');
            $members.each(function (index, item) {
                $(item).removeClass('selected');
            });
        } else {
            $e.addClass('yes');
            $members.each(function (index, item) {
                $(item).addClass('selected');
            });
        }

    });

    $(document).on('click', '.isShow', function (e) {
        //展开/隐藏成员
        var $e = $(this);
        var $members = $e.parents('.group').find('.members');
        if ($e.hasClass('hide')) {
            $e.removeClass('hide');
            $members.slideDown();
        } else {
            $e.addClass('hide');
            $members.slideUp();

        }
    });

    $(document).on('click', '.member', function (e) {
        //点击选择成员
        var $e = $(this);
        $e.toggleClass('selected');
        checkSelect($e)
    });

    function checkSelect(e) {
        //检查是否全选
        var $e = $(e);
        var $group = $e.parents('.group');
        var $selectAll = $group.find('.selectAll');
        var $members = $group.find('.members');
        var all = $members.find('.member').length;
        var selected = $members.find('.member.selected').length;
        if (selected == all) {
            //全选了
            $selectAll.removeClass('mm');
            $selectAll.addClass('yes');
        } else if (selected == 0) {
            //都没选
            $selectAll.removeClass('yes');
            $selectAll.removeClass('mm');
        } else {
            //选了一部分
            $selectAll.removeClass('yes');
            $selectAll.addClass('mm');
        }
    }

    $(document).on('click', '.editor', function () {
        var inputHtml = $.trim($inputDiv.html());
        localStorage.setItem('inputHtmlEditor', inputHtml);
        layer.open({
            type: 2,//层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
            title: ['编辑器', 'background:#414A53;color:#FFFFFF'],//控制默认标题栏。title:'标题'，自定义标题样式，可以title: ['标题', 'background:#c00;'] 第二个参数可书写任意css
            offset: [0, ''],//[纵坐标, 横坐标]，默认为垂直水平居中
            area: ['95%', '98%'],//[宽度, 高度]
//            maxmin: true,//是否输出窗口最小化/全屏/还原按钮,默认false
            shade: [0.3, '#000'],//控制遮罩[0.5, '#000']（[透明度0~1, '色值']）,设置为false则不显示
            shadeClose: true,//遮罩显示情况下，控制点击遮罩区域是否关闭层
            anim: false,//动画类型0~6 默认0 设置false为不使用动画
            scrollbar: false,//屏蔽浏览器滚动条
            content: 'editor.html'
        });
    });
</script>
</body>
</html>